<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css" />
    <!--
        rel:
            icon 
            stylesheet
        href 加载外部样式文件
        src 加载外部脚本文件
    -->

</head>

<body>
    <div class="header">
           <div class="logo">
                <img src="../imgs/logo.jpg">
           </div>
        
            <div>
                        
                <ul class="headerbox1">
                        <li> <a href="about:blank" target="_blank">企业首页</a></li>
                        <li> <a href="about:blank" target="_blank">关于我们</a></li>
                        <li><a href="about:blank" target="_blank">新闻中心</a></li>
                        <li><a href="about:blank" target="_blank">产品中心</a></li>
                        <li><a href="about:blank" target="_blank">客户服务</a></li>
                        <li><a href="about:blank" target="_blank">联系我们</a></li>
                </ul>
            </div>

            <div>
                <ul class="headerbox2">
                    <li>CN</li>
                    <li>EN</li>
            </ul>

            </div>
    </div>

    </div>

        <wrapper class="wrapper">
            <div class="swipper">

                <ul class="imgs">
                    <li ></li>
                    <li ></li>
                    <li ></li>
                    <li ></li>
                </ul>
                
                <div class="pre"></div>
                <div class="next"></div>
                <div class="count">
                    <div class="active"></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>

    
        </wrapper>
    <script>
    
        let i = 0;
        let imgs = document.getElementsByClassName("imgs")[0];
        function gonext(){
            i ++ ;
            i = (i + 4) % 4;
            imgs.style.marginLeft = "-" + i * 100 + "%";
        }
        setInterval(gonext, 2000);
    
    </script>
    <main>
        <div class="introduce">
            <article class="iheader">   
                <h2> Welcome </h2>
                <p> Welcome Welcome Welcome Welcome Welcome  Welcome Welcome Welcome Welcome Welcome WelcomeWelcome Welcome Welcome Welcome Welcome Welcome Welcome Welcome </p>
            </article>
        
            <div class="intrabout">
                <div class="box"> 
                        <img src="../imgs/index-cultural01.png">
                        <div>
                                <h2>CULTURAL</h2>
                                <h2>COMPANYCULTURAL</h2>
                        </div>
                        <p> COMPANY CULTURAL COMPANY CULTURAL COMPANY CULTURAL COMPANY CULTURAL </p>
                </div>
                <div class="box">
                        <img src="../imgs/index-cultural02.png">
                        <div>
                            <h2>CULTURAL</h2>
                            <h2>COMPANYCULTURAL</h2>
                        </div>
                        <p> COMPANY CULTURAL COMPANY CULTURAL COMPANY CULTURAL COMPANY CULTURAL </p>
                </div>
                <div class="box">
                        <img src="../imgs/index-cultural03.png">
                        <div>
                                <h2>CULTURAL</h2>
                                <h2>COMPANYCULTURAL</h2>
                            </div>
                        <p> COMPANY CULTURAL COMPANY CULTURAL COMPANY CULTURAL COMPANY CULTURAL </p>
                </div>
                <div class="box">
                        <img src="../imgs/index-cultural04.png">
                        <div>
                                <h2>CULTURAL</h2>
                                <h2>COMPANYCULTURAL</h2>
                        </div>
                        <p> COMPANY CULTURAL COMPANY CULTURAL  COMPANY CULTURAL COMPANY CULTURAL </p>
                </div>
    
            </div>
                
        </div>
            <div class="production"> 
                <article class="pheader">   
                <h2> PRODUCTION CENTER </h2>
                <p> PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION</p>
                </article>
            
                <div class="prodabout">
                    <div class="box">
                        <img src="../imgs/pro-center1.jpg">
                        <p>production1</p>

                    </div>
                    <div class="box">
                        <img src="../imgs/pro-center2.jpg">
                        <p>production1</p>
                    </div>
                    <div class="box">
                        <img src="../imgs/pro-center3.jpg">
                        <p>production1</p>
                    </div>
                    <div class="box">
                        <img src="../imgs/pro-center4.jpg">
                        <p>production1</p>
                    </div>
                    <div class="box">
                        <img src="../imgs/pro-center5.jpg">
                        <p>production1</p>
                    </div>
                    <div class="box">
                        <img src="../imgs/pro-center6.jpg">
                        <p>production1</p>
                    </div>
        
                </div>
            </div>
        
        
            <div class="news">
        
                <article class="nheader">   
                    <h2> NEWS CENTER </h2>
                    <p> NEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWSNEWS</p>
                </article>
        
                <div class="newabout">
                    <div class="imgs">
                        <li class="imgs_img0"></li>
                        <li class="imgs_img1"></li>
                        <li class="imgs_img2"></li>
                        <li class="imgs_img3"></li>
                    </div>
                   
                    
                   <script>
                       let newI = 0;
                       function newImgs(){
                        let imgs = document.getElementsByClassName("imgs_img" + newI)[0];
                            imgs.style.height = 0;
                            newI ++ ;
                            newI = (newI + 4) % 4;
                            imgs = document.getElementsByClassName("imgs_img" + newI)[0];
                            imgs.style.height = 300 + "px";
                        }
                            setInterval(newImgs, 2000);
                    
                    </script>
                    <div class="box">
                        <div class="boxs">
                            <div>
                                <p> 15 </p>
                                <p> 2016-03 </p>
                            </div>
                            <div>
                                <p>AWE2016</p>
                                <p>text text text text text text texttext text text text text text text</p>
                            </div>

                        </div>
                        <div class="texts">
                            <ul>
                                <li><span>text text text text text text text</span> <span class="date">2016-03-15</span></li>
                                <li><span>text text text text text text text</span> <span class="date">2016-03-15</span></li>
                                <li><span>text text text text text text text</span> <span class="date">2016-03-15</span></li>
                                <li><span>text text text text text text text</span> <span class="date">2016-03-15</span></li>
                                <li><span>text text text text text text text</span> <span class="date">2016-03-15</span></li>
                                <li><span>text text text text text text text</span> <span class="date">2016-03-15</span></li>
                            </ul>
                        </div>
                        
                    </div>
        
                </div>
        
            </div>
        
            <div class="video">
                <article class="vheader">   
                    <h2> VIDEO CENTER </h2>
                    <p> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
                </article>
                
                <div class="imgs">
                    <div class="Imgcontainer">
                        <img src="../imgs/pro-center1.jpg" alt="" >
                        <div>
                            <p>TEXT</p>
                            <p>TEXT TEXT</p>
                        </div>
                    </div>
                    <div class="Imgcontainer">
                        <img src="../imgs/pro-center2.jpg" alt="">
                         <div>
                            <p>TEXT</p>
                            <p>TEXT TEXT</p>
                        </div>
                    </div>
                    <div class="Imgcontainer">
                        <img src="../imgs/pro-center3.jpg" alt="">
                        <div>
                            <p>TEXT </p>
                            <p>TEXT TEXT</p>
                        </div>
                    </div>
                    <div class="Imgcontainer">
                        <img src="../imgs/pro-center4.jpg" alt="">
                        <div>
                            <p>TEXT</p>
                            <p>TEXT TEXT</p>
                        </div>
                    </div>


                </div>
                <div class="pre">
                    
                </div>
                <div class="next">


                </div>
            </div>
        

    </main>


    <footer class="footer">
        <div class="boxs">
            <div class="leftbox">
                <ul class="box">

                    <li> TEXT </li>
                    <li> text </li>
                    <li> text </li>
                    <li> text </li>
                    <li> text </li>
                    <li> text </li>
                </ul>
                <ul class="box">
                        <li>TEXT</li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                </ul>
                <ul class="box">
                        <li>TEXT</li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                </ul>
                <ul class="box">
                        <li>TEXT</li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                </ul>
                <ul class="box">
                        <li> TEXT</li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                </ul>
                <ul class="box">
                        <li>TEXT</li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                        <li> text </li>
                </ul>
        
                </div>
                <div class="rightbox">
                    <form action="">
                        <input type="text" value="请输入您的姓名">
                        <input type="text" value="请输入您的联系方式">
                        <div>
                            <textarea type="text" value="请输入您的留言"></textarea>
                        </div>
                        <input type="submit"/>
                    </form>

                </div>
               
            </div>
            <hr color="white">
            <p align="center">Text text test</p>
    </footer>
</body>

</html>